<template>
    <div class="question_container">
        <HeaderTop :goBack="true" :headTitle="question.title"></HeaderTop>
        <section class="scroll_wrapper" v-if="content">
            <Scroll>
                <p class="markdown" v-html="content">
                    
                </p>
            </Scroll>
        </section>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Scroll from '@components/common/Scroll';
import showdown from 'showdown'
export default {
    components:{
        Scroll
    },
    data(){
        return {
            content:''
        }
    },
    computed:{
        ...mapState(['question']),
    },
    mounted(){
            //创建实例
        let converter = new showdown.Converter();
        //进行转换
        this.content = converter.makeHtml(this.question.content);
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.question_container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
    background-color: #f2f2f2;
    z-index: 100;
    display: flex;
    .scroll_wrapper{
        flex: 1;
        .markdown{
            font-size: .65rem;
            padding: 0 .7rem;
            color: #666;
            padding-bottom: 2rem;
        }
    }
}
</style>